<template>
    <div class="user-list">
      <h2>用户列表</h2>
      <div v-if="loading" class="loading">
        <p>Loading users...</p>
      </div>
      
      <div v-else-if="error" class="error-message">
        <p>{{ error }}</p>
        <button @click="fetchUsers" class="retry-button">Retry</button>
      </div>
      
      <div v-else-if="users.length === 0" class="no-users">
        <p>No users found. Try adding a new user.</p>
      </div>
      
      <table v-else class="user-table">
        <thead>
          <tr>
            <th>编码ID</th>
            <th>用户名</th>
            <th>邮箱地址</th>
            <th>电话</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in users" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.userName }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.phone }}</td>
            <td class="action-buttons">
              <router-link :to="`/edit/${user.id}`" class="edit-btn">编辑</router-link>
              <button 
                @click="deleteUser(user.id)" 
                class="delete-btn"
                :disabled="deleting"
              >
                {{ deleting ? 'Deleting...' : '删除' }}
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { UserService } from '@/services/userService';
  import { useRouter } from 'vue-router';
  
  const users = ref([]);
  const loading = ref(true);
  const error = ref(null);
  const deleting = ref(false);
  const router = useRouter();
  
  const fetchUsers = async () => {
    loading.value = true;
    error.value = null;
    try {
      users.value = await UserService.getAllUsers();
      loading.value = false;
    } catch (err) {
      error.value = err.response?.data?.message || 'Failed to fetch users. Please check your connection.';
      loading.value = false;
    }
  };
  
  const deleteUser = async (id) => {
    if (confirm('是否确认删除当前用户?')) {
      deleting.value = true;
      try {
        await UserService.deleteUser(id);
        users.value = users.value.filter(user => user.id !== id);
      } catch (err) {
        error.value = err.response?.data?.message || 'Failed to delete user';
      } finally {
        deleting.value = false;
      }
    }
  };
  
  onMounted(fetchUsers);
  </script>
  
  <style scoped>
  .user-list {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .loading, .error-message, .no-users {
    text-align: center;
    padding: 20px;
  }
  
  .error-message {
    color: red;
  }
  
  .user-table {
    width: 900px;
    border-collapse: collapse;
  }
  
  .user-table th, .user-table td {
    border: 1px solid #ddd;
    padding: 20px;
    width: 180px;
    text-align: center;
  }
  
  .action-buttons {
    display: flex;
    gap: 10px;
  }
  
  .edit-btn, .delete-btn {
    padding: 5px 10px;
    text-decoration: none;
  }
  
  .edit-btn {
    color: blue;
  }
  
  .delete-btn {
    color: red;
  }
  </style>